<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useCoinStore } from '@/store/coin'
import { userStore } from '@/store/user'
const props = defineProps({
    width: {
        type: String,
        default: ''
    },
    currentInfo: {
        type: Object,
        default: () => { }
    }
})
const isEnter = ref(false)
const isHiden = ref(false)

const mouseleaveFn = () => {
    isEnter.value = false
}
const mouseenterFn = () => {
    isEnter.value = true
}
const volList = ref<{ title: string; value: number }[]>([])
const volList1 = ref<{ title: string; value: number }[]>([])
const emit = defineEmits(['setMainIndicator'])
const setMainIndicator = () => {
    emit('setMainIndicator', 'vol', 'vice')
}
const colorList = computed(() => {
    const obj: Record<string, string> = {}
    userStore().mainIndicator.vol.list.map((item: any) => {
        obj[`VOLMA(${item.value})`] = item.color
    })
    return obj
});
watch(() => useCoinStore().infoVOL, (v: Record<string, number>) => {
    let list = []
    for (let i in v) {
        if (i !== 'vol') {
            list.push({ title: i, value: v[i] })
        }
    }
    list.push({ title: 'VOL', value: v.vol })
    volList.value = list
})
watch(() => props.currentInfo.VOL, (v) => {
    const data = v.VOL
    if (data) {
        let list = []
        for (let i in data) {
            if (i !== 'vol') {
                list.push({ title: i, value: data[i] })
            }
        }
        list.push({ title: 'VOL', value: data.vol })
        volList1.value = list
    }
})
</script>

<template>
    <div @mouseenter="mouseenterFn" @mouseleave="mouseleaveFn" :style="{ width: isHiden ? '14px' : '' }" class=" dark:hover:border-[#333b47] leading-[12px] rounded-[4px] p-[4px] flex items-center flex-wrap cursor-pointer
    hover:border-[#ededed] border-solid border-[1px] border-[transparent]">
        <div :class="[isHiden ? '' : 'mr-[6px]']" @click="isHiden = !isHiden"
            class="iconfont icon-you text-[12px]  text-[#BFBFBF] font-bold  dark:text-[#707a8a] "
            :style="{ 'transform': !isHiden ? 'rotate(90deg)' : 'rotate(0deg)' }" style="transition: 0.5s;"></div>
        <template v-if="!isHiden">
            <div v-show="!useCoinStore().coinInfo.inCharts" class="flex items-center" v-for="item, i in volList"
                :key="i">
                <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">{{ item.title }}{{ item.title
                    ===
                    "VOL" ? '(' +
                    useCoinStore().coinInfo.name + ')': ''}}:</div>
                <div class="flex-shrink-0   mr-[10px]" :style="{ color: colorList[item.title] }">{{
                    item.value.toFixed(2)
                    }}
                </div>
            </div>
            <div v-show="useCoinStore().coinInfo.inCharts" class="flex items-center" v-for="item, i in volList1"
                :key="i">
                <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">{{ item.title }}{{ item.title
                    ===
                    "VOL" ? '(' +
                    useCoinStore().coinInfo.name + ')': ''}}:</div>
                <div class="flex-shrink-0 mr-[10px]" :style="{ color: colorList[item.title] }">{{
                    item.value.toFixed(2)
                }}
                </div>
            </div>
            <div v-show="isEnter" class="flex items-center">
                <div class="iconfont  text-[14px] text-[#9c9c9c]"
                    :class="[userStore().mainIndicator.vol.hide ? 'icon-kejian' : 'icon-bukejian']"
                    @click="userStore().setMainIndicatorHiden('vol', !userStore().mainIndicator.vol.hide)">
                </div>
                <div @click="setMainIndicator" class="iconfont icon-shezhi text-[11px] text-[#9c9c9c] ml-[8px]"></div>
                <div @click="userStore().setMainIndicatorChecked('vol', false)"
                    class="iconfont icon-guanbi text-[8px] text-[#9c9c9c] ml-[8px]"></div>
            </div>
        </template>
    </div>
</template>

<style scoped></style>